"use client";
import { editor, Range, languages } from "monaco-editor";
import React, { useEffect, useRef, useState } from "react";

export default function MonacoEditor() {
  const containerRef = useRef(null);
  const diffContainerRef = useRef(null);
  const [language, setLanguage] = useState("javascript");
  const standarEditorRef = useRef<editor.IStandaloneCodeEditor>(null);
  useEffect(() => {
    const standardEditor = editor.create(containerRef.current!, {
      value:
        'function hello() {\n\talert("Hello world!");\n}\nconsole.log("https://kimi.moonshot.cn/chat/ctjtnu0h9477s9jrkgj0")\nalert("1")',
      language: language,
      theme: "vs-dark",
      tabSize: 2,
    });
    console.log(editor);
    console.log(standardEditor.getModel());
    standarEditorRef.current = standardEditor
    return () => {
      standardEditor.dispose();
      standarEditorRef.current = null
    };
  }, []);

  useEffect(() => {
    if (standarEditorRef.current) {
      const model = standarEditorRef.current.getModel();
      // @ts-ignore
      model.setLanguage(language);
    }
  }, [language]);

  return (
    <div>
      <div>
        <select
          value={language}
          name="language"
          id=""
          onChange={(event) => {
            setLanguage(event.target.value);
          }}
        >
          <option value="javascript">javascript</option>
          <option value="css">css</option>
          <option value="html">html</option>
        </select>
      </div>
      <div ref={containerRef} id="container" className="h-[600px] w-full"></div>
      <div
        ref={diffContainerRef}
        id="diff-container"
        className="h-[600px] w-full"
      ></div>
    </div>
  );
}
